<template>
    <div>
        <div class="price">
            <div>{{$t('menu.total')}}</div>
            <div>${{total}}</div>
        </div>

        <!-- 确认下单 -->
        <button class="button" @click="confirm">
            {{$t('menu.place-order')}}
        </button>

    </div>
</template>

<script>

import { mapActions } from 'vuex';
import _ from 'lodash';
import { get } from '@/common/utils';

export default {
  props: ['total'],
  methods: {
    ...mapActions([
      'cleanOrderListState',
      'getOrderListState',
      'saveShowCard',
      'placeOrder',
      'showAlert',
    ]),
    confirm() {
      this.$emit('test', false);
      const user = get('user');
      if (user) {
        const { id } = this.$route.params;
        this.placeOrder(id);

        this.setShowCardList();
      } else {
        this.showAlert({
          message: 'error.need-login',
          func: () => {
            this.$router.push('/login');
          },
        });
      }
    },
    // 改变vuex 中的ShowCard来刷新页面
    setShowCardList() {
      this.getOrderListState({ id: this.$route.params.id });
      const newList = _.groupBy(this.orderListState, '_id');

      this.saveShowCard({ list: newList });
    },
  },
};
</script>
<style lang="scss" scoped>
.price{
    display : flex;
    justify-content : space-between;
    padding-top : 10px;
    padding-bottom : 15px;
    font-size : 24px;
    line-height : 1.5;
    color : #202020;
    border-top : 1px solid #ccc;
}
.button{
    width : 100%;
    height : 40px;
    padding : 0 20px;
    // font-family : PingFangSC-Regular;
    font-size : 16px;
    line-height : 1.5;
    color : #fff;
    cursor : pointer;
    background-color : #0d9e65;
    border : 0;
    border-radius : 25px;
}
</style>
